import {
    View, ScrollView, Dimensions, RefreshControl, TouchableOpacity,
    TouchableHighlight, Text, StyleSheet, Image
} from 'react-native';
import React, {Component} from 'react';
import Urls, {getRealUrl} from '../const/Urls'
import LocalImg from '../const/Images'
import moment from 'moment'

const {width, height} = Dimensions.get("window");

class PageAlljhDetail extends Component {

    constructor(props) {
        super(props);

        this.id = this.props.navigation.getParam('id').id

        this.state = {
            result: [],
        }
    }


    componentDidMount() {
        const request = new Map()
        request.set("id", this.id)

        fetch(getRealUrl(Urls['alljhUrl'], request), {
            method: "GET",
            headers: {
                Accept: "application/json",
                "Content-Type": "application/json"
            },
        })
            .then(response => response.json())
            .then(responseJson => {
                this.setState({
                    result: responseJson
                })
            })
            .catch(error => {
                console.error(error);
            });
    }


    processDateTime(date) {
        const m = moment(date)
        if (m.isValid()) {
            return m.format('DD/HHmm')
        } else
            return ""
    }

    render() {
        return (
            <View style={{
                width: width,
                height: height,
                flexDirection: 'column',
                backgroundColor: '#ffffff',
                paddingBottom: 20
            }}>
                {this.renderHeader()}
                {this.renderBody()}
            </View>
        )
    }


    renderHeader() {
        const data = this.state.result;
        const model = data[0];

        return (<View style={{
            flexDirection: 'row',
            flex: 0,
            height: 60,
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: '#0066FF'
        }}>
            <View style={{flex: 1, padding: 10}}>
                <TouchableOpacity onPress={() => this.props.navigation.pop()}>
                    <Image source={LocalImg['backImg']}
                           style={{height: 30, width: 30, resizeMode: 'contain'}}/>
                </TouchableOpacity>
            </View>
            <View style={{flex: 3, justifyContent: 'center', alignItems: 'center'}}>
                <Text style={{fontSize: 20, color: '#ffffff'}}>
                    {model ? model.SHIP_NAME : ''}
                </Text>
            </View>
            <View style={{flex: 1, alignItems: 'flex-end', padding: 10}}>
            </View>
        </View>)
    }


    renderBody() {
        const data = this.state.result;
        const model = data[0];
        if (model) {
            return (
                <ScrollView style={{backgroundColor: '#fffff0', height: height - 80}}>
                    <View style={styles.card}>
                        <View style={styles.row}>
                            <View style={styles.cell}>
                                <Text style={styles.text}>船名</Text>
                                <Text style={styles.textContent}>{model.SHIP_NAME}</Text>
                            </View>
                            <View style={styles.cell}>
                                <Text style={styles.text}>状态</Text>
                                <Text style={styles.textContent}>{model.APP_PURPOSE_STATENAME}</Text>
                            </View>
                        </View>
                        <View style={styles.row}>
                            <View style={styles.cell}>
                                <Text style={styles.text}>长度</Text>
                                <Text style={styles.textContent}>{model.SHIP_LENGTH}</Text>
                            </View>
                            <View style={styles.cell}>
                                <Text style={styles.text}>吃水</Text>
                                <Text style={styles.textContent}>{model.CSQ} / {model.CSH}</Text>
                            </View>
                        </View>
                    </View>

                    <View style={styles.card}>
                        <View style={styles.row}>
                            <View style={styles.cell}>
                                <Text style={styles.text}>地点</Text>
                                <Text style={styles.textContent}>{model.PILOT_PLACE_FROM} / {model.PILOT_PLACE_TO}</Text>
                            </View>
                        </View>
                        <View style={styles.row}>
                            <View style={styles.cell}>
                                <Text style={styles.text}>时间</Text>
                                <Text style={styles.textContent}>{this.processDateTime(model.PILOT_TIME)} ~ {this.processDateTime(model.PILOT2_TIME)}</Text>
                            </View>
                        </View>
                        <View style={styles.row}>
                            <View style={styles.cell}>
                                <Text style={styles.text}>拖轮</Text>
                                <Text style={styles.textContent}>{model.TUGBOATA}</Text>
                            </View>
                        </View>
                        <View style={styles.row}>
                            <View style={styles.cell}>
                                <Text style={styles.text}>上船地点/时间</Text>
                                <Text style={styles.textContent}>{model.PILOT_EMBARK_PLACE} / {this.processDateTime(model.PILOT_EMBARK_TIME)}</Text>
                            </View>
                        </View>
                        <View style={styles.row}>
                            <View style={styles.cell}>
                                <Text style={styles.text}>接送地点/时间</Text>
                                <Text style={styles.textContent}>{model.LAND_PLACE} / {this.processDateTime(model.LAND_TIME)}</Text>
                            </View>
                        </View>
                    </View>

                    <View style={styles.card}>
                        <View style={styles.row}>
                            <View style={styles.cell}>
                                <Text style={styles.text}>申请或代理人</Text>
                                <Text style={styles.textContent}>{model.AGENT_COR_NAME}</Text>
                            </View>
                        </View>
                        <View style={styles.row}>
                            <View style={styles.cell}>
                                <Text style={styles.text}>经办人</Text>
                                <Text style={styles.textContent}>{model.AGENT_NAME}</Text>
                            </View>
                        </View>
                        <View style={styles.lastRow}>
                            <View style={styles.cell}>
                                <Text style={[styles.text, {flex: 1}]}>备注</Text>
                                <Text style={[styles.textContent, {flex: 3}]}>{model.NODE}</Text>
                            </View>
                        </View>
                    </View>

                </ScrollView>
            )
        } else {
            return <View/>
        }

    }

    judgeYN(data, yes = '是', no = '否', expect = '1') {
        if (data === expect) {
            return yes
        } else {
            return no
        }
    }

    processDateTime(date) {
        //const m = moment(date, moment.ISO_8601);
        const m = moment(date);
        if (m.isValid()) {
            return m.format('DD/HHmm')
        } else
            return ""
    }


}

const styles = StyleSheet.create({
    phone: {
        flex: 1,
        textDecorationLine: 'underline',
        color: '#0066FF',
    },
    card: {
        borderRadius: 10,
        borderWidth: 1,
        borderStyle: 'solid',
        borderColor: '#CCCCCC',
        flexDirection: 'column',
        backgroundColor: '#ffffff',
        marginLeft: 5,
        marginRight: 5,
        marginBottom: 10
    },
    row: {
        flexDirection: 'row',
        borderBottomWidth: 0.5,
        borderStyle: 'solid',
        borderBottomColor: '#CCCCCC',
        backgroundColor: '#ffffff',
        padding: 10,
        marginLeft: 10,
        marginRight: 10
    },
    lastRow: {
        flexDirection: 'row',
        padding: 10,
        marginLeft: 10,
        marginRight: 10,
        overflow: 'visible'
    },
    cell: {
        flex: 1,
        flexDirection: 'row'
    },
    text: {
        flex: 1
    },
    textContent: {
        flex: 1,
        color: 'black'
    }
});


export default PageAlljhDetail;